<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡_高级使用</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .outer{
            width: 1300px;
            height: 900px;
            border: 1px solid black;
            margin: auto;
        }
        div{
            width: 200px;
            height: 100px;
            background-color: orange;
            transition-property: all;
            transition-duration: 5s;
            /*过渡延迟:等一会在发生过渡*/
            /*transition-delay:2s*/

        }
        .box1{
            background-color: deepskyblue;
            /*盒子默认过渡速度时由慢->快->慢,这叫做平滑过渡,我们可以使用transition-timing-function进行修改*/
            transition-timing-function: ease;/*默认为ease平滑过渡*/
        }
        .box2{
            background-color: wheat;
            transition-timing-function:linear;/*匀速过渡,每个阶段过渡速度都是一样*/
        }
        .box3{
            background-color: green;
            transition-timing-function: ease-in;/*慢-快*/
        }
        .box4{
            background-color: yellow;
            transition-timing-function: ease-out;/*快->慢*/
        }
        .box5{
            background-color: red;
            transition-timing-function: ease-in-out;/*慢->快->慢*/
        }
        .box6{
            background-color: blue;
            transition-timing-function: step-start;/*不考虑过渡的时间*/
        }
        .box7{
            background-color: mediumpurple;
            transition-timing-function: step-end;/*等过渡时间过完之后直接到终点*/
        }
        .box8{
            background-color: chocolate;
            transition-timing-function: steps(20,end);/*分成20分,一一份一份呈现,后面的属性可以取两个值:start和end,start为马上拼接,end为等一下拼接*/
        }
        .box9{
            background-color: black;
            /*贝塞尔曲线*/
            transition-timing-function: cubic-bezier(.08,.89,.72,.7);/*通过官网调整想要的速度变化,在复制到cubic-bezier()中,可以让她超出在回来*/
        }

        /*鼠标放入outer,所有的div的width都发生变化*/
        .outer:hover div{
            width: 1300px;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="box1">ease平滑过渡</div>
    <div class="box2">linear匀速过渡</div>
    <div class="box3">ease-in由慢->快</div>
    <div class="box4">ease-out由快->慢</div>
    <div class="box5">ease-in-out(慢->快->慢)</div>
    <div class="box6">step-start:不考虑过渡的时间</div>
    <div class="box7"> step-end:等过渡时间过完之后直接到终点</div>
    <div class="box8">steps(20)分成20分,一一份一份呈现</div>
    <div class="box9">贝塞尔曲线</div>
</div>

</body>
</html>